<template>
  <div class="more-action-box" v-if="showActions" :style="{position}">
    <div class="more-action-mark" @click="closeActions" :style="{position}"></div>
    <div class="more-aciton" :style="{position}">
      <div class="title-box">
        <div class="title">{{$t('message.buttons.addLabel')}}</div>
        <svg class="close-button" aria-hidden="true" @click="closeActions">
          <use xlink:href="#keowledge-mobile-guanbi"></use>
        </svg>
      </div>
      <div class="action-boxs">
        <div class="tag-box">
          <mobileScroll :ops="scrollOps" :openPullDown="true" :openUpload="isMoreLoad"  style="max-height: 21.25rem;" v-if="tagList.length!=0"
            @refreshStart="handleRS" @loadMoreStart="handleLoadStart">
            <div class="tag-item" v-for="(item,index) in tagList" :key="index" :class="[item.isSelect && 'tag-item-active']"
              @click="editTagSelect(item)">
              <div class="tag-color" :style="{background:item.colour}"></div>
              <div class="tag-name">{{item.tagName}}</div>
              <div class="tag-select">
                <svg class="icon" aria-hidden="true" v-if="item.isSelect">
                  <use xlink:href="#keowledge-mobile-gou"></use>
                </svg>
              </div>
            </div>
          </mobileScroll>
        </div>
        <div class="button-box">
          <div class="sure-button" @click="submitHandle">
            {{$t('message.buttons.submit')}}
          </div> 
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import mobileScroll from './mobileScroll.vue'
import { getTagAlls,editDocTag } from '@/api/tag'
import { useRouter } from "vue-router"
const router = useRouter();

const emit = defineEmits(["doAction"])
const props = defineProps({
  position:{
    type:String,
    default:'absolute'
  }
})

const tagList = ref([])
const showActions = ref(false)
const openItem = ref({})
const labelPage = ref({
  size:20,
  current:1,
  total:0
})
const isMoreLoad = ref(true)
const scrollOps = ref({
  click:true,
  observeDOM: true,
  probeType: 3,
  pullDownRefresh: {
    threshold: parseFloat(document.documentElement.style.fontSize) * 6.25,
    stop:  parseFloat(document.documentElement.style.fontSize) * 6.25
  },
  pullUpLoad: {
    threshold: parseFloat(document.documentElement.style.fontSize) * 3.125,
    stop:  parseFloat(document.documentElement.style.fontSize) * 3.125
  }
})

function handleRS(done){
  clearTag()
  openActions(openItem.value,done)
  done()
}
function handleLoadStart( done){
  if(labelPage.value.current*labelPage.value.size<labelPage.value.total) {
    labelPage.value.current += 1
    openActions(openItem.value,done)
  }else{
    done()
  }
}
function openActions(item,done){
  openItem.value = JSON.parse(JSON.stringify(item))
  getTagAlls({
    dcId:openItem.value.id,
    size:labelPage.value.size,
    current:labelPage.value.current
  }).then(res=>{
    if(res.data.code == 0){
      labelPage.value.total = res.data.data.total
      tagList.value.push(...res.data.data.records)
      setScrollOps()
      if(done) done()
    }
  }).catch(err=>{
    if(done) done()
  })
  showActions.value = true
}
function setScrollOps(){
  isMoreLoad.value = labelPage.value.current*labelPage.value.size<labelPage.value.total
}
function closeActions(){
  clearTag()
  showActions.value = false
}
function clearTag(){
  tagList.value = []
  labelPage.value = {
    size:20,
    current:1,
    total:0
  }
}
function doAction(item){
  emit('doAction',item)
}
function editTagSelect(item){
  item.isSelect = !item.isSelect
  editDocTag({
    ...item,
    dcId:openItem.value.id
  }).then(res=>{
    if(res.data.code==0){
      let msg = $t('message.message.binLabelSuccess')
      if(!item.isSelect){
        msg = $t('message.message.unbindLabelSuccess')
      }
      proxy.$mobileMessage({
        text: msg,
        type: "success",
      });
    }
  })
}
function submitHandle(){
  closeActions()
}
</script>
<style lang="scss" scoped>
.more-action-box{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  z-index: 100;
  .more-action-mark{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background: rgba(54,59,76,0.5);
    z-index: 0;
  }
  .more-aciton{
    position: absolute;
    width: 100%;
    bottom: 0px;
    z-index: 1;
    background-color: #f5f6f7;
    border-radius: .75rem .75rem 0px 0px;
    padding: 1rem .375rem .375rem;
    box-sizing: border-box;
    .title-box{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon{
        width: 1.5rem;
        height: 1.5rem;
        margin-left: .75rem;
      }
      .title{
        width: calc(100% - 3.75rem);
        color: #363B4C;
        font-size: .9375rem;
        @include SourceHanSansCN-Bold;
        margin-left: .75rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .close-button{
        width: 1rem;
        height: 1rem;
        margin-right: .75rem;
      }
    }
    .action-boxs{
      margin-top: .75rem;
      // padding: 0.1rem 1.5rem;
      box-sizing: border-box;
      background: #FFFFFF;
      border-radius: .4375rem;
      .tag-box{
        min-height: 10rem;
        max-height: 21.25rem;
        .tag-item{
          display: flex;
          align-items: center;
          height: 2.5rem;
          padding: 0px .75rem;
          .tag-color{
            width: .875rem;
            height: .875rem;
            border-radius: .25rem;
            margin-right: .75rem;
          }
          .tag-name{
            color: #363B4C;
            font-size: .9375rem;
            @include SourceHanSansCN-Regular;
            width:calc(100% - 1.25rem);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          .tag-select{
            width: 1rem;
            height: 1rem;
            .icon{
              width: 1rem;
              height: 1rem;
            }
          }
        }
        .tag-item-active{
          .tag-name{
            color:#1E6FFF;
          }
        }
      }

      .button-box{
        padding: .625rem .75rem;
        border-top: 1px solid #EEEFF0;
        .sure-button{
          @include SourceHanSansCN-Medium;
          font-size: .875rem;
          height: 3rem;
          background: #1E6FFF;
          border-radius: .375rem;
          color: #FFFFFF;
          line-height: 3rem;
          text-align: center;
        }
      }
    }
  }
}
</style>